<script setup lang="ts">
import { ref } from 'vue'
import { User,Key } from '@element-plus/icons-vue'
const account = ref('')
const password = ref('')
import { useRouter } from 'vue-router';
import md5 from 'js-md5';
import {ElLoading, ElMessage} from "element-plus";

const router = useRouter();

const openFullScreen = () => {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  });
  return loading;
};

const closeFullScreen = (loading) => {
  loading.close();
};

const login = async () => {
  let loading = openFullScreen();
  const formData = new FormData()

  formData.append('username', account.value);
  formData.append('password', md5(password.value));

  try {
    const response = await fetch("https://movie.cpb2013.top/admin/login.php?mode=login", {
      method: 'POST',
      headers: {
        // 'Authorization': `Bearer ${token}`,
        'Accept': 'application/json',
      },
      body: formData,
    })

    if (response.ok) {
      const result = await response.json()
      if(result['status'] ==='ok')
      {
        // 登录成功，跳转到首页
        localStorage.setItem('name', account.value);
        localStorage.setItem('key', result['key']);
        closeFullScreen(loading);
        ElMessage({
          type: 'success',
          message: '登入成功',
        });
        await router.push('/');
      }
      else
      {
        ElMessage.error(result['msg'])
      }
    } else {
      ElMessage.error('登录失败！')
    }
  } catch (error) {
    ElMessage.error('请求失败！')
  }
  finally {
    closeFullScreen(loading);
  }
}

</script>

<template>
<view class="login_main">
  <view class="right-res">
    <view class="sys_logo">
      <el-image style="width: 128px; height: 128px;border-radius: 80px" src="logo.jpg" />
    </view>
    <view class="sys_title">PiliPili Admin</view>
    <view class="account">
      <el-input
          v-model="account"
          style="width: 90%"
          placeholder="请输入账号"
          :prefix-icon="User"
      />
    </view>
    <view class="password">
      <el-input
          v-model="password"
          type="password"
          style="width: 90%"
          placeholder="请输入密码"
          :prefix-icon="Key"
      />
    </view>
    <view class="btn_login">

      <el-button color="#fff5c3" @click="login">登录</el-button>
    </view>
  </view>
</view>
</template>

<style scoped>
.login_main
{
  height: 100%;
  width: 100%;
  display: flex;
  background-image: url('/b2.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  flex-direction: row-reverse;
  position: absolute;
}
.right-res
{
  display: flex;
  height: 100%;
  width: 20%;
  max-width: 20%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  margin-right: 6%;
}
.sys_logo
{
  width: 100%;
  display: flex;
  height: 128px;
  padding-top: 20px;
  justify-content: center;

}
.sys_title
{
  width: 100%;
  justify-content: center;
  padding-top: 20px;
  color: #787878;
  font-size: 24px;
  font-weight: 800;
  display: flex;
}
.account
{
  padding-top: 20px;
  display: flex;
  width: 100%;
  border-radius: 20px;
  justify-content: center;
}
.password
{
  padding-top: 20px;
  display: flex;
  width: 100%;
  border-radius: 20px;
  justify-content: center;
}
.btn_login
{
  padding-top: 20px;
  width: 100%;
  justify-content: center;
  display: flex;
}
.el-button
{
  width: 90%;
  font-size: 16px;
  font-weight: 900;
  height: 40px;
}
</style>